<template>
	<view class="website-container">
		<view v-if="info.type === 2">
			<web-view :src="websiteUrl"></web-view>
		</view>
		<view v-else>
			<view class="swiper-container">
				<!-- <swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
					<swiper-item v-for="(item, index) in info.ximg" :key="index">
						<image :src="item"></image>
					</swiper-item>
				</swiper> -->
				<uni-swiper-dot class="uni-swiper-dot-box" :info="info.ximg" :current="current" :dots-styles="dotStyle" :mode="mode" field="content">
					<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" @change="change">
						<swiper-item v-for="(item, index) in info.ximg" :key="index">
							<image :src="item"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="content">
				<view class="introduce">
					<view class="title">公司介绍</view>
					<view class="text">{{info.companyIntroduction}}</view>
				</view>
				<view class="img-box">
					<image v-for="(item, index) in info.qimg" :key="index" :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				info: {},
				websiteUrl: '',
				current: 0,
				mode: 'round',
				dotStyle: {
					bottom: 80
				}
			}
		},
		onLoad() {
			// this.getData()
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.getData()
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			getData() {
				const userId = uni.getStorageSync('userId')
				http({
					url: `card/micro-website/get?id=${userId}`
				}).then(res => {				
					if(res.code === 0) {
						this.info = {
							...res.data,
							qimg: res.data.qimg ? JSON.parse(res.data.qimg) : [],
							ximg: res.data.ximg ? JSON.parse(res.data.ximg) : []
						}
					}
				})		
			}
		},
	}
</script>

<style lang="scss" scoped>
	.website-container {
		min-height: 100vh;
		background-color: #F0F0F4;
		font-family: PingFang SC;
		// padding-bottom: 30rpx;
		box-sizing: border-box;
		.swiper {
			height: 826rpx;
			image {
				width: 100%;
				height: 100%;
				-webkit-mask-image: linear-gradient(to top, transparent, black 154rpx);
				mask-image: linear-gradient(to top, transparent, black 154rpx);
				mask-size: cover;
				-webkit-mask-size: cover;
			}
		}
		.content {
			padding: 20rpx 20rpx 0;
			position: relative;
			top: -154rpx;
			.introduce {
				// width: 710rpx;
				// height: 616rpx;
				min-height: 300rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				padding: 50rpx 40rpx 40rpx;				
				.title {
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					margin-bottom: 36rpx;
				}
				.text {
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
					line-height: 50rpx;
				}
			}
			.img-box {
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				image {
					width: 100%;
					margin: 0 !important;
					padding: 0 !important;
					&:first-child {
						border-radius: 40rpx 40rpx 0 0;
					}
					&:last-child {
						border-radius: 0 0 40rpx 40rpx;
					}
				}
			}
		}
	}	
</style>